<template>
  <div class="bg">
    <!-- 时间搜索框 -->
    <searchTime
      @searchvalue="userSearch"
      @searchreset="reset"
      :options="options"
      :titMsg="placeholder"
      :selectBoolen="false"
      :selectTime="false"
    />

    <!-- 表格展示 -->
    <el-card class="card">
      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column prop="businessName" label="商户名称" align="center"></el-table-column>
        <el-table-column prop="businessContactPhone" label="手机号码" align="center"></el-table-column>
        <el-table-column label="评论" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.businessId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.businessCommentNumber"
                @change="changeremark"
                maxlength="5"

                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.businessCommentNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column label="点赞" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.businessId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.businessLikeNumber"
                @change="changelike"
                maxlength="5"

                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.businessLikeNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column label="转发" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.businessId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.businessForwardNumber"
                @change="transmit"
                maxlength="5"

                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.businessForwardNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column label="投诉" align="center" prop="businessReportNumber">
          <!-- <template slot-scope="scope">
            <span v-if="scope.row.businessId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.businessReportNumber"
                @change="complaint"
                maxlength="5"

                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.businessReportNumber}}</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="businessCreateTime" label="时间"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.businessStatus==1?'营业中':scope.row.businessStatus==2?'未营业':'待审核'}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="lookmerchantMsg(scope.row)" type="primary" size="small">查看</el-button>
            <el-button
              v-if="scope.row.businessId === tabClickIndex "
              @click="savecompile(scope.row)"
              type="warning"
              size="small"
            >保存</el-button>
            <el-button v-else @click="compile(scope.row)" type="warning" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页style="margin-top:24px" -->
      <el-pagination
        style="margin-top:24px"
          background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 弹窗 -->

    <el-dialog title="商家详情" :visible.sync="dialogVisible" width="30%" >
      <merchant
        :comment="commentlist"
        :userMessage="merchantmsg"
        :commentTotal="merchantTotal"
        @currentpage="currentpage"
        @commentshield="merchantshield"
      />
    </el-dialog>
  </div>
</template>

<script>
import { export2Excel } from "@/components/commom.js";
import searchTime from "@/components/searchTime";
import merchant from "@/components/merchant";
export default {
  components: {
    searchTime,
    merchant
  },
  data() {
    return {
      placeholder: "请输入商户名称", //提示信息
      dialogVisible: false, //弹窗关闭
      options: [
        {
          value: 1,
          label: "充值成功"
        },
        {
          value: 2,
          label: "充值失败"
        }
      ],
      value: "",
      value1: "",
      downloadLoading: false,
      current: 1, //页数
      total: 0, //页数
      businessId: 0, //商家Id
      tableData: [], //数据列表
      merchantTotal: 0, //商家条数
      merchantpage: 1, //商家页数
      merchantmsg: {}, //商家信息
      merchant: false, //数据是否展示
      commentlist: [], //评论列表
      // 模糊查询
      startDate: "",
      endDate: "",
      selectCode: "",
      // 修改编辑
      tabClickIndex: null,
      businessCommentNumber: "", //商家评论数量
      businessLikeNumber: "", //商家点赞数量
      businessForwardNumber: "", //商家转发数量
      // businessReportNumber: "" //商家评论数量
    };
  },
  mounted() {
    this.merchantlist(); //加载商户列表
    // this.lookmerchantlist(); //加载商户评论列表
  },
  methods: {
    // 获取商户动态列表
    merchantlist() {
      let param = {
        size: 10,
        startDate: this.startDate,
        endDate: this.endDate,
        selectCode: this.selectCode,
        current: this.current,
        status: 1
      };
      this.$http.article.merchant(param).then(res => {
        this.tableData = res.result.records;
        this.total = res.result.total;
        console.log("有效商户列表", res);
        //显示每页展示的数量
        res.result.records.forEach((item, index) => {
          //res.data.data.list 表格数据     forEach为每一项添加数据
          item.index = index + 1 + (this.current - 1) * 10;
          // this.currentPage当前页  this.pageParams.size 每页显示多少    :page-sizes="[10,20,30,50]" 分页大小

          return item;
        });
      });
    },
    //编辑
    compile(val) {
      console.log("val", val);
      this.tabClickIndex = val.businessId;
      // 获取条数的详情
      this.$http.article
        .lookmerchant({ petBusinessId: val.businessId })
        .then(res => {
          this.businessCommentNumber = res.result.businessCommentNumber;
          this.businessLikeNumber = res.result.businessLikeNumber;
          this.businessForwardNumber = res.result.businessForwardNumber;
          // this.businessReportNumber = res.result.businessReportNumber;
          console.log("获取商家的详情", res);
        });
    },

    // 保存数量
    savecompile(val) {
      this.tabClickIndex = null;
      let param = {
        businessId: val.businessId,
        businessCommentNumber: this.businessCommentNumber, //商家评论数量
        businessLikeNumber: this.businessLikeNumber, //商家点赞数量
        businessForwardNumber: this.businessForwardNumber, //商家转发数量
        // businessReportNumber: this.businessReportNumber //商家评论数量
      };
      this.$http.article.updatamerchant(param).then(res => {
        if (res.code == 200) this.$message.success(res.msg);
        this.merchantlist();
        console.log("修改点赞转发", res);
      });
    },
    // 获取评论数量
    changeremark(val) {
      this.businessCommentNumber = val;
      console.log("评论数量", val);
    },
    // 获取点赞数量
    changelike(val) {
      this.businessLikeNumber = val;
      console.log("点赞数量", val);
    },
    // 获取转发数量
    transmit(val) {
      this.businessForwardNumber = val;
      console.log("转发数量", val);
    },
    // // 获取投诉数量
    // complaint(val) {
    //   this.businessReportNumber = val;
    //   console.log("投诉数量", val);
    // },
    // 分页数据
    handleCurrentChange(val) {
      this.current = val;
      this.merchantlist(); //加载商户列表
    },

    // 分页条数
    handleSizeChange(val) {
      this.current = val;
      this.merchantlist();
      console.log(val);
    },

    // 点击查看
    lookmerchantMsg(val) {
      this.dialogVisible = true; //弹窗
      this.businessId = val.businessId;
      this.lookmerchantlist(val.businessId);
      this.$http.article
        .lookmerchant({ petBusinessId: val.businessId })
        .then(res => {
          this.merchantmsg = res.result;
          console.log("获取商家详情", res);
        });
    },

    // 获取商户评论列表
    lookmerchantlist(businessId) {
      console.log("获取商户列表", businessId);
      let param = {
        size: 10,
        current: this.merchantpage,
        bussinessId: businessId
      };
      this.$http.article.merchantComment(param).then(res => {
        this.commentlist = res.result.records;
        this.merchantTotal = res.result.total;
        console.log("有效商户评论列表", res);
      });
    },

    // 商户评论列表分页
    currentpage(val) {
      this.merchantpage = val;
      this.lookmerchantlist(this.businessId);
      console.log("商户列表分页", val);
    },

    // 是否立即禁用
    merchantshield(val) {
      console.log("禁用状态", val);
      let merchantMsg = "";
      if (val.commentStatus == 1) {
        merchantMsg = "确定屏蔽";
      } else {
        merchantMsg = "确定解除屏蔽";
      }
      this.$confirm(`此操作将${merchantMsg}文件, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let merchantStatus = 0;
          if (val.commentStatus == 1) {
            merchantStatus = 2;
          } else {
            merchantStatus = 1;
          }
          let param = {
            commentsId: val.commentsId,
            commentStatus: merchantStatus
            // businessId: val.businessId,
            // businessStatus: merchantStatus
          };
          this.$http.article.updataCommentsMerchant(param).then(res => {
            this.$message.success(res.msg);
            if (res.code == 200) this.lookmerchantlist(this.businessId);
            console.log("禁用或者启用", res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
      console.log("是否立即禁用", val);
    },

    // 确认弹窗是否关闭
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then(_ => {
    //       done();
    //     })
    //     .catch(_ => {});
    // },
    // 搜索框
    userSearch(val) {
      this.current=1;
      this.startDate = val.firstTime;
      this.endDate = val.endTime;
      this.selectCode = val.search;
      this.merchantlist(); //加载商户列表
      console.log("搜索框", val);
    },
    // 重置功能
    reset(val) {
      this.startDate = "";
      this.endDate = "";
      this.selectCode = "";
      if (val == "reseta") this.merchantlist(); //加载商户列表
      console.log(val);
    }
  }
};
</script>

<style lang="scss" scoped>
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;
  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}

.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>